<template>
	
	<div class="b9_active web-font">
		<el-row>
			<el-col :lg="12" :sm="12" xs="24"><img src="../assets/img/2.4.png" /></el-col>
			<el-col :lg="12" :sm="12" xs="24">
				<div class="active_1">
					<h2>真珠蛋白活力因子</h2>
					<p>全新簡化、面部身體系列</p>
					<button @click="goDetail">了解更多</button>
				</div>
			</el-col>
		</el-row>
		<br />
		<el-row>
			
			<el-col :lg="6" :sm="12" xs="12">
				<img src="../assets/img/2.2.png" height="350px"/>
			</el-col>
			<el-col :lg="6" :sm="12" xs="12">
				<div class="active_2">
					<h2>必讀推薦</h2>
					<p>10月最新資訊</p>
					<button  @click="goDetail">了解更多</button>
				</div>
			</el-col>
			<el-col :lg="6" :sm="12" xs="12">
				<img src="../assets/img/2.7.png" height="350px"/>
			</el-col>
			<el-col :lg="6" :sm="12" xs="12">
				
				<div class="active_3">
					<h2>New 新品發佈</h2>
					<p>STATE  NO.9</p>
					<button  @click="goDetail">了解更多</button>
				</div>
			</el-col>
		</el-row>
		<div style="margin: 40px 0; text-align: center;">
			<el-row>
				<el-col :lg="10" :sm="10" :xs="10" ><hr size="1" color="#242424" width="100%" /></el-col>
				<el-col :lg="4" :sm="4" :xs="4"><span>DISCOVER MORE</span></el-col>
				<el-col :lg="10" :sm="10" :xs="10" ><hr size="1" color="#242424" width="100%"/></el-col>
			</el-row>
		</div>
		<div class="slide_click">
			<img class="slide_right" src="../assets/img/right.png" width="30px" height="48px"/>
			<img class="slide_left" src="../assets/img/right.png" width="30px" height="48px"/>
		
			<el-row>
				<el-col :lg="24">
					
					<swiper :options="swiperOption">
		        <!-- <swiper-slide v-for="item in IndexBanner"><img :src="item"/></swiper-slide> -->
		        
							<swiper-slide>
								<div style="padding:0 15px;">
									<img src="../assets/img/2.5.png"/>
									<div class="slide_desc">
										<h5>NEW！全新V臉緊致塑顏精華新上市！</h5>
										<span class="slide_desc_span0">全新V臉緊致塑顏精華新上市了，活动回馈老…</span>
										<div class="slide_time">
											<img src="../assets/img/time.png" width="18" height="18"/>
											<span>2018/0/9</span>
										</div>
									</div>
								</div>
							</swiper-slide>
							<swiper-slide>
								<div  style="padding:0 15px;"> 
									<img src="../assets/img/2.3.png"/>
									<div class="slide_desc">
										<h5>聲波震動潔面儀</h5>
										<span class="slide_desc_span0">全新聲波震動潔面儀新上市了，活動回饋…</span>
										<div class="slide_time">
											<img src="../assets/img/time.png" width="18" height="18"/>
											<span>2018/0/9</span>
										</div>
									</div>
								</div>
							</swiper-slide>
							<swiper-slide>
								<div  style="padding:0 15px;">
									<img src="../assets/img/2.1.png"/>
									<div class="slide_desc">
										<h5>線下回饋活動開始啦！</h5>
										<span class="slide_desc_span0">線下活動時間:2018.10.1-2018.10.20</span>
										<div class="slide_time">
											<img src="../assets/img/time.png" width="18" height="18"/>
											<span>2018/0/9</span>
										</div>
									</div>
								</div>
							</swiper-slide>
	
		             </swiper>
				</el-col>
				
			</el-row>
		</div>
	</div>
</template>

<script>
	import {swiper,swiperSide} from 'vue-awesome-swiper'
export default {
  	name:'Bactivity',
  	components:{
				swiper,
				swiperSide
		},
  	mounted(){
  		this.tableData()
    },
    data(){
    	return {
    		swiperOption:{
					pagination:'.swiper-pagination',
					autoplay:true,
					nextEl: '.swiper_next',
        			prevEl: '.swiper_pre',
        			slidesPerView: 3
				 },
    		msg:1
    	}
    },
    methods:{
    	tableData(){
    		let self = this;
			this.msg="7";
    	},
    	goDetail(){
    		this.$router.push('/Actdet');
    	}
    }
}
</script>

<style>
	.slide_click{
		position: relative;
	}
	.slide_right,.slide_left{
		position: absolute;
		width: 14px!important;
		height: 25px!important;
		
		top: 110px;
	}
	.slide_right{
		right: -30px;
	}
	.slide_left{
		left: -30px;
	}
	.b9_active .slide_time img{
		width: 14px!important;
		height: 14px;
		vertical-align: middle;
	}
	.b9_active .slide_time span{
		color: #B8B8B8;
		font-size: 12px;
		vertical-align: middle;
	}
	.b9_active .slide_desc h5{
		font-size: 15px;
		margin: 5px 0;
	}
	.b9_active .slide_desc_span0{
		font-size: 12px;
	}
	.b9_active h2{
		font-size: 30px;
		margin: 0;
		padding: 0;
	}
	.b9_active p{
		font-size: 24px;
	}
	.b9_active button{
		background: none;
		color: black;
		font-size: 18px;
		border:1px solid rgba(0,0,0,1);
		width: 180px;
		height: 40px;
	}
	.b9_active button:hover{
		background: #000000;
		color: white;
	}
	
 
	.active_1,.active_2,.active_3{
		text-align: center;
		padding: 60px 0px;
		height: 230px;
	}
	
	.b9_active img{
		width: 100%;
	}
	.b9_active{
		width: 70%;
		margin-left: 15%;
	}
</style>